<!DOCTYPE html>
<html>
<head>
    <title>季度柱形图</title>
    <style>
        .chart-container {
            width: 600px;
            height: 300px;
            border: 1px solid #ccc;
            padding: 20px;
            margin: 20px;
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
        }

        .bar {
            width: 60px;
            background-color: #4CAF50;
            margin: 0 10px;
            position: relative;
            transition: height 0.5s;
        }

        .bar-label {
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
        }

        .bar-value {
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translateX(-50%);
        }

        .input-group {
            margin: 20px;
        }

        input {
            width: 60px;
            margin: 0 10px;
            padding: 5px;
        }

        button {
            padding: 8px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="input-group">
        <input type="number" id="q1" placeholder="Q1" min="0">
        <input type="number" id="q2" placeholder="Q2" min="0">
        <input type="number" id="q3" placeholder="Q3" min="0">
        <input type="number" id="q4" placeholder="Q4" min="0">
        <button onclick="generateChart()">生成图表</button>
    </div>
    <div id="chart" class="chart-container"></div>

    <script>
        function generateChart() {
            // 获取输入值
            const values = [
                document.getElementById('q1').value || 0,
                document.getElementById('q2').value || 0,
                document.getElementById('q3').value || 0,
                document.getElementById('q4').value || 0
            ];

            // 计算最大高度（防止除零）
            const maxValue = Math.max(...values, 1);
            const containerHeight = 300 - 40; // 容器总高度减去padding

            // 清空旧图表
            const chart = document.getElementById('chart');
            chart.innerHTML = '';

            // 创建柱形
            values.forEach((value, index) => {
                const barHeight = (value / maxValue) * containerHeight;
                
                const bar = document.createElement('div');
                bar.className = 'bar';
                bar.style.height = `${barHeight}px`;
                bar.innerHTML = `
                    <div class="bar-value">${value}</div>
                    <div class="bar-label">Q${index + 1}</div>
                `;
                
                // 添加渐变色效果
                bar.style.background = `linear-gradient(to top, #4CAF50, #45a049)`;
                
                chart.appendChild(bar);
            });
        }
    </script>
</body>
</html>